<template>
  <TableView class="table">
    <template #form>
      <NSpace justify="space-between">
        <NSpace align="center">
          资产名称:
          <NInput style="width: 200rem" placeholder="请输入资产名称" v-model:value="paginationReactive.assetName" clearable />
          资产类目：
          <NTreeSelect style="width: 200rem" :options="categoryList" v-model:value="paginationReactive.categoriesId"
            label-field="categoriesName" key-field="id" children-field="childList" :clearable="true" />
          <NButton type="primary" style="width: 78rem" ghost @click="search">
            查找
          </NButton>
          <!-- <NButton type="primary" @click="$router.push({ path: '/OA/Assets/AssetsDetail' })">
            资产详细列表
          </NButton> -->
        </NSpace>
      </NSpace>
    </template>

    <template #table="props">
      <NDataTable v-bind="props" :bordered="false" :columns="columns" :data="tableData" :pagination="false"
        :loading="tableLoading" />
    </template>

    <template #pagination>
      <NPagination :page-sizes="paginationReactive.pageSizes" :item-count="paginationReactive.itemCount"
        :page="paginationReactive.page" :page-size="paginationReactive.pageSize"
        @update:page="paginationReactive.onChange" @update:page-size="paginationReactive.onUpdatePageSize"
        show-size-picker show-quick-jumper :suffix="() => '页'">
        <template #prefix>
          <span style="font-size: 14px;"> 共{{ paginationReactive.itemCount }}条</span>
        </template>
      </NPagination>
    </template>
  </TableView>
</template>
<script setup lang="ts">
import { NSpace, NButton, NDataTable, NPagination, useMessage, NModal, NInput, NTreeSelect } from 'naive-ui'
import { h, reactive, ref, watch, onDeactivated, onMounted } from 'vue'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import type { DataTableColumns } from 'naive-ui'
import TableView from '@/components/TableView.vue'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import router from '@/router'
import type { HttpResponse } from '@/utils/http'
import { useViewerStore } from '@/views/OA/Common/store'

const useStore = useViewerStore()
const message = useMessage()
const route = useRoute()
const modalVisible = ref(false)

const columns: DataTableColumns = [
  {
    title: '资产名称',
    key: 'assetName',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '资产类目',
    key: 'categoriesName',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '数量',
    key: 'con',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '操作',
    key: 'action',
    align: useStore.isCenter,
    width: 120,
    fixed: 'right',
    render: (row: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: async () => router.push({ path: '/OA/Assets/AssetsDetail', query: { name: row.assetName } }) // 带资产名字 到 详情页面
        },
        {
          default: () => '详情'
        }
      )
    ]
  }
]
// 上一页下一页
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  assetName: null, // 资产名称
  categoriesId: null, // 资产类目
  onChange: (page: number) => {
    paginationReactive.page = page
    getAssetsList()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    getAssetsList()
  }
})
// 获取列表
const tableData = ref([])
const tableLoading = ref(false)
// 点击查找
const search = () => {
  paginationReactive.page = 1
  getAssetsList()
}
const getAssetsList = async () => {
  tableLoading.value = true
  const [error, res] = await sendRequest({
    module: 'assetsManagement',
    api: 'getAssetsList',
    override: {
      params: {
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
        assetName: paginationReactive.assetName, // 资产名称
        categoriesId: paginationReactive.categoriesId // 资产类目
      }
    }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  tableData.value = []
  setTimeout(() => {
    tableData.value = res.data.list
    paginationReactive.itemCount = res.data.totalCount
  }, 0)
}

const keyUpDown = (e: any) => e.key == 'Enter' && getAssetsList()

onDeactivated(() => window.removeEventListener('keyup', keyUpDown, false))

const categoryList = ref<any>([])
/** 获取类目下拉 */
const getCategoryList = async () => {
  const [error, res] = await sendRequest<HttpResponse<any>>({
    module: 'assetsManagement',
    api: 'getCategoryList',
    override: {
      data: {}
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  categoryList.value = res.data
}

onMounted(() => {
  getCategoryList();
})

watch(
    () => route,
    async () => {
        if (route.path == '/OA/AssetsManegement/AssetManager') {
          window.addEventListener('keyup', keyUpDown, false)
          getAssetsList()
        }
    },
    { deep: true, immediate: true }
)

</script>
<style scoped lang="scss">
.table {
  padding: 29rem 30rem 42rem;
}
</style>